<template>
  <view class="notify_m">
    <image class="n_close" src="../../../assets/images/index/close.png" mode="scaleToFill" @touchStart="closeBottomNotify" />
    <image class="n_icon" src="../../../assets/images/index/laba.png" mode="scaleToFill" />
    <view class="n_text">您有{{notifyCount}}单待签名运单，请及时签名确认！</view>
    <view class="n_sign" @touchStart="toSign">去签名</view>
  </view>
</template>

<script lang="ts" setup>
import { ref , defineProps, defineEmits, computed } from "vue";
import Taro from "@tarojs/taro";
const props = defineProps<{
  notifyCount: number;
}>()
const emit = defineEmits(['closeBottomNotify'])

const toSign = ()=>{
  Taro.navigateTo({
    url: '/pages/sign/confirm'
  })
}

function closeBottomNotify() {
  emit('closeBottomNotify')
}
</script>

<style lang="scss">
.notify_m {
  position: fixed;
  width: 700rpx;
  height: 68rpx;
  left: 25rpx;
  bottom: 16rpx;
  border-radius: 68rpx;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  z-index: 19;
  .n_close {
    width: 44rpx;
    height: 44rpx;
    margin-left: 12rpx;
  }
  .n_icon {
    width: 28rpx;
    height: 28rpx;
    margin-left: 27rpx;
  }
  .n_text {
    font-size: 22rpx;
    line-height: 22rpx;
    color: #fff;
    margin-left: 12rpx;
    width: 463rpx;
  }
  .n_sign {
    width: 104rpx;
    height: 44rpx;
    border-radius: 22rpx;
    background-color: #0966ff;
    color: #fff;
    font-size: 24rpx;
    //text-align: center;
    //line-height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
